<template>
  <div
    class="pay-item box opacity flex flex-cc click"
    @click="router.push(`/product/detail?id=${v.goods_id}`)"
  >
    <!-- 封面 -->
    <div class="flex-fs-0 mr-10">
      <van-image class="cover radius radius--lg" :src="v.image"></van-image>
    </div>

    <!-- 数据 -->
    <div>
      <div class="fz-12">
        <!-- 名称 -->
        <div class="fz-14 hide-2">{{ v.title }}</div>

        <div>
          <div>
            <span>原价：</span>
            <span>{{ v.marketprice }} U</span>
          </div>

          <div>
            <span>现价：</span>
            <span>{{ v.price }} U</span>
          </div>
        </div>

        <div>
          <div>
            <span>规格：</span>
            <span>未接入</span>
          </div>

          <div>
            <span>尺码：</span>
            <span>未接入</span>
          </div>
        </div>

        <div>
          <span>数量：</span>
          <span>{{ v.nums }}</span>
        </div>

        <div>
          <span>支付价格：</span>
          <span>{{ v.realprice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['v'])
const router = useRouter()
</script>

<style lang="scss" scoped>
.pay-item {
  position: relative;

  .cover {
    width: 100px;
    height: 100px;
  }
}
</style>
